{% extends "base.html" %}

{% block content %}
<div class="row">
    <div class="col-md-8 mx-auto">
        <div class="card">
            <div class="card-header bg-success text-white">
                <h4><i class="fas fa-comments"></i> 智能英语对话</h4>
                <small>与AI英语老师实时对话，提升口语能力</small>
            </div>
            <div class="card-body">
                <div id="chat-container" style="height: 400px; overflow-y: auto; border: 1px solid #ddd; padding: 15px; margin-bottom: 15px; border-radius: 10px; background: #f8f9fa;">
                    <div class="alert alert-info">
                        <strong>AI老师:</strong> 👋 你好！我是你的AI英语老师，让我们开始对话吧！你可以用英语跟我聊任何话题。
                    </div>
                </div>
                
                <div class="input-group">
                    <input type="text" id="user-input" class="form-control" placeholder="输入你的英语句子..." autocomplete="off">
                    <button id="send-btn" class="btn btn-success">
                        <i class="fas fa-paper-plane"></i> 发送
                    </button>
                </div>
                
                <div class="mt-3">
                    <small class="text-muted">
                        <i class="fas fa-lightbulb"></i> 提示：尝试用英语描述你的日常生活、兴趣爱好、工作计划等
                    </small>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const chatContainer = document.getElementById('chat-container');
    const userInput = document.getElementById('user-input');
    const sendBtn = document.getElementById('send-btn');
    
    function addMessage(content, isUser = false) {
        const messageDiv = document.createElement('div');
        messageDiv.className = `alert ${isUser ? 'alert-warning' : 'alert-info'}`;
        messageDiv.style.marginBottom = '10px';
        messageDiv.innerHTML = isUser ? 
            `<strong>你:</strong> ${content}` : 
            `<strong>AI老师:</strong> ${content.replace(/\n/g, '<br>')}`;
        
        chatContainer.appendChild(messageDiv);
        chatContainer.scrollTop = chatContainer.scrollHeight;
    }
    
    async function sendMessage() {
        const message = userInput.value.trim();
        if (!message) return;
        
        addMessage(message, true);
        userInput.value = '';
        sendBtn.disabled = true;
        sendBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 发送中...';
        
        try {
            const response = await fetch('/chat', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ message: message })
            });
            
            const data = await response.json();
            addMessage(data.response);
        } catch (error) {
            addMessage('抱歉，发送消息时出现错误。请检查网络连接。');
        } finally {
            sendBtn.disabled = false;
            sendBtn.innerHTML = '<i class="fas fa-paper-plane"></i> 发送';
            userInput.focus();
        }
    }
    
    sendBtn.addEventListener('click', sendMessage);
    userInput.addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            sendMessage();
        }
    });
    
    // 自动聚焦输入框
    userInput.focus();
});
</script>
{% endblock %}